<template>
    <div class="top-nav">
        <div>
            <h3>智慧武汉交通系统</h3>
        </div>
        <div class="nav">
            <ul type="none">
                <li :class="{ 'default': selectedTab === 0 }" @click="selectTab(0)"><span @click="road">实时路况</span>
                </li>
                <li :class="{ 'default': selectedTab === 1 }" @click="selectTab(1)"><span @click="tool">工具箱</span>
                    <div class="tool" :style="{ display: store.isClickTool ? 'block' : 'none' }">
                        <div class="operate">
                            <el-button type="primary" @click="point" :disabled="store.isDraw"
                                :style="{ cursor: store.isDraw ? 'crosshair' : '' }">绘制点</el-button>
                            <el-button type="primary" @click="line" :disabled="store.isDraw">绘制线</el-button>
                            <el-button type="primary" @click="polygon" :disabled="store.isDraw">绘制面</el-button>
                            <el-button type="danger" class="btn">清空绘制</el-button>
                            <el-button type="warning" class="btn">拉框查询</el-button>
                            <el-button type="success" class="btn" @click="lookNotice">查看公告</el-button>
                        </div>

                    </div>
                </li>
                <li :class="{ 'default': selectedTab === 2 }" @click="selectTab(2)"><span @click="putNotice">发布公告</span>
                </li>
                <li :class="{ 'default': selectedTab === 3 }" @click="selectTab(3)"
                    :style="{ background: store.isAdd ? '#030829' : '', opacity: store.isAdd ? 0.8 : '', fontWeight: store.isAdd ? 'normal' : '' }">
                    <span @click="add">事件添加</span>
                </li>
                <li class="search">
                    <span>事件查询</span>
                    <input type="text" placeholder="请输入事件编号" @click="selectTab(4)" v-model="searchID"
                        @keydown.enter="search">
                </li>
                <li :class="{ 'default': selectedTab === 5 }" @click="selectTab(5)"><span @click="goScene">可视化大屏</span>
                </li>
            </ul>
        </div>
        <div class="user">
            <h3>管理员</h3>
        </div>
    </div>
</template>

<script setup>
import { mapStore } from '@/store'
import { onMounted, ref, inject } from 'vue';
import { useRouter } from 'vue-router';
import { toolMap } from '@/hooks/toolHook';
import { drawMap } from '../hooks/drawFeatures'
import { curRoad } from '../hooks/curRoadHook'
import { eventAdd } from '../hooks/eventAddHook'
const { road } = curRoad()
const { tool, selectQuery } = toolMap()
const { point, line, polygon } = drawMap()
const { add } = eventAdd()
const store = mapStore()
const router = useRouter()
const searchID = ref()
let map
// let urlRoads = 'http://39.103.151.139:8000/gis/road_state'
// const date = ref(0)
onMounted(() => {
    map = inject('$map')
})


const selectedTab = ref()

const selectTab = (index) => {
    selectedTab.value = index
}

const search = () => {
    store.isEnter = true
    store.searchByid(searchID.value)
}

const putNotice = () => {
    store.isNotice = true
}

const lookNotice = () => {
    store.isLookNotice = true
}

const goScene = () => {
    router.push('/scene')
}
</script>

<style scoped lang="scss">
.top-nav {
    position: fixed;
    display: flex;
    width: 100%;
    height: 80px;
    background: #030829;
    opacity: 0.8;
    padding: 0 20px;
    min-width: 1366px;
    z-index: 1000;
    line-height: 80px;
    justify-content: space-around;

    h3 {
        color: #fff;
    }

    .nav {
        ul {
            display: flex;
            justify-content: space-around;

            li {
                color: #fff !important;
                padding: 0 20px;

                &:hover {
                    cursor: pointer;
                }

                .search:hover {
                    cursor: default;
                    background: #030829;
                }

                input {
                    margin-left: 20px;
                    padding: 10px;
                }
            }

            .default {
                background: rgba(106, 102, 102, 0.542);
                font-weight: bold;
            }
        }
    }


}

.tool {
    width: 320px;
    height: 150px;
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: solid 3px lightblue;

    .operate {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        flex-wrap: wrap;

        .btn {
            margin-top: 20px;
        }
    }
}

.mapboxgl-ctrl-group {
    top: 20%;
    left: 20%;
    margin-top: 100px;
}
</style>
